<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../../js/lib/vue-v2.5.13/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div id="todo-list">
			<ol>
				<!--
			      现在我们为每个 todo-item 提供 todo 对象
			      todo 对象是变量，即其内容可以是动态的。
			      我们也需要为每个组件提供一个“key”，稍后再
			      作详细解释。
			    -->
				<todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id">
				</todo-item>
			</ol>
		</div>
		<script type="text/javascript">
			Vue.component('todo-item', {
				props: ['todo'],
				template: '<li>{{todo.text }}</li>'
			})

			var todoList = new Vue({
				el: '#todo-list',
				data: {
					groceryList: [{
							id: 0,
							text: '蔬菜'
						},
						{
							id: 1,
							text: '奶酪'
						},
						{
							id: 2,
							text: '随便其它什么人吃的东西'
						}
					]
				}
			});
		</script>
	</body>

</html>